<template>
  <div class="myPosition">
    <div class="title_redeem"><span></span>我的持仓</div>
    <div class="fundsList">
      <gj-loadmore :bottom-method="loadBottom" ref="loadmore">
        <div class="tab_fundsList">
          <div class="row_fundsList" v-for="(item,index) in myPosition" :key="index" @click.stop.prevent="selectFund(item)">
            <div class="col_fundsList col_fundsList_1">
              <p class="name_fund">{{item.ofname}}</p>
              <span class="code_fund">{{item.ofcode}}</span>
            </div>
            <div class="col_fundsList col_fundsList_2">
              <p class="price_fund">{{item.last_price}}</p>
              <span class="market_fund">净值/元</span>
            </div>
            <div class="col_fundsList col_fundsList_3">
              <p class="count_fund">{{item.enable_vol}}</p>
              <span>可用份额</span>
            </div>
            <div class="col_fundsList col_fundsList_4">
              <i class="iconfont icon-jia1 addBtn"></i>
            </div>
          </div>
        </div>
      </gj-loadmore>
    </div>
  </div>
</template>

<script>
  import CommonUtil from 'common/common.util'
  import RemoteDAO from 'common/remoteDAO'
  import LocalDAO from 'common/localDAO'
  import LoadMore from 'components/LoadMore'
  export default {
    props: {
      chooseFund: {
        type: Object
      }
    },
    data () {
      return {
        user_code: LocalDAO.getUserCode(),
        myPosition: [],
        start: 0,
        limit: 10
      }
    },
    components: {
      'gj-loadmore': LoadMore
    },
    methods: {
      //上拉加载
      loadBottom () {
        this.getMyPosition();
      },

      //获取我的持仓列表
      getMyPosition () {
        let params = {
          client_id: this.user_code,
          start: this.start,
          limit: this.limit
        };
        RemoteDAO.callJCL11171(params,response => {
          if(response.error == "0"){
            if(response.data.body.holders.length > 0){
              var holders = this.transformData(response.data.body.holders);
              this.myPosition = this.myPosition.concat(holders);
              if(response.data.body.holders.length == this.limit){
                this.start += this.limit;
                this.$refs.loadmore.onBottomLoaded();//加载成功
              }else{
                this.$refs.loadmore.onBottomAllLoaded();//无更多数据
              }
            }else{
              if(this.start == 0){
                this.$refs.loadmore.onBottomError("大王，您还没有持仓基金哦！");//暂无数据
              }else{
                this.$refs.loadmore.onBottomAllLoaded();//无更多数据
              }
            }
          }else{
            this.$refs.loadmore.onBottomError(response.data);//调接口失败
            this.myPosition = [];
          }
        })
      },

      //数据转换
      transformData (arr) {
        if(arr.length > 0){
          var result = [];
          for(let i=0;i<arr.length;i++){
            var obj = {};
            Object.assign(obj,{
              ofcode: arr[i].ofcode,
              ofname: arr[i].ofname,
              ofstatue: arr[i].ofstatue,
              current_vol: CommonUtil.toFixed(arr[i].current_vol,2),                  //持仓份额
              enable_vol: CommonUtil.toFixed(arr[i].enable_vol,2),                    //可赎回份额
              market_balance: CommonUtil.toFixed(arr[i].market_balance,2),            //基金市值
              last_price: CommonUtil.toFixed(arr[i].last_price,2),                    //基金净值
              income_balance: CommonUtil.toFixed(Number(arr[i].income_balance)*100,2) //浮动盈亏
            });
            result.push(obj);
          }
          return result;
        }else{
          return [];
        }
      },

      //选择基金
      selectFund (item) {
        this.$emit('chooseFund',item);
      }
    }
  }
</script>

<style scoped>
  * {
    margin: 0;
    padding: 0;
  }
  .myPosition {
    width: 100%;
    height: 100%;
    padding: 30px 0 10px;
    box-sizing: border-box;
  }
  .title_redeem {
    height: 30px;
    border-bottom: 1px solid #DFDFDF;
    box-sizing: border-box;
    margin-top: -30px;
    padding: 0 10%;
    font-size: 15px;
    line-height: 30px;
  }
  .title_redeem span {
    display: inline-block;
    width: 3px;
    height: 12px;
    border-radius: 2px;
    margin-right: 4px;
    background: #33a7f1;
    position: relative;
    top: 1px;
  }
  .fundsList {
    width: 85%;
    height: 100%;
    padding-right: 5%;
    margin-left: 10%;
    overflow-y: auto;
    /*-webkit-overflow-scrolling: touch;*/
  }
  .fundsList::-webkit-scrollbar {
    width: 2px;
  }
  .fundsList::-webkit-scrollbar-thumb {
    background-color: #3fb9ee;
  }
  .fundsList::-webkit-scrollbar-track {
    height: 80%;
    margin-top: 10px;
    background-color: #e7eaed;
  }
  .tab_fundsList {
    display: table;
    width: 100%;
  }
  .row_fundsList {
    display: table-row;
  }
  .col_fundsList {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 65px;
    border-bottom: 1px solid #DFDFDF;
  }
  .row_fundsList:last-child .col_fundsList {
    border-bottom: none;
  }
  .col_fundsList_1 {
    width: 32%;
    text-align: left;
  }
  .col_fundsList_2, .col_fundsList_3 {
    width: 25%;
  }
  .col_fundsList_4 {
    text-align: right;
  }
  .col_fundsList p {
    padding: 8px 0 6px;
    font-size: 16px;
    line-height: 16px;
    color: #565656;
  }
  .col_fundsList span {
    display: block;
    padding-bottom: 8px;
    font-size: 12px;
    line-height: 12px;
    color: #999;
  }
  .col_fundsList i {
    font-size: 30px;
    color: #3cb8eb;
  }
</style>
